<template>
  <div class="loginBox">
    <div class="content">
      <router-link to="/">
        <div class="back iconfont iconhoutui"></div>
      </router-link>
      <div class="color-opacity"></div>
      <div class="log-bc">
        <div class="login" v-if="!isLogin">
          <div class="imagBox imgWrap">
            <img src="../assets/image/ganda.jpg" alt />
          </div>
          <h3>播放器登录页</h3>
          <div class="information">
            <div class="user">Username：</div>
            <div class="instyle">
              <input
                type="text"
                placeholder="Telephone or E-mail"
                v-model="userInput"
                ref="user"
                @click="userClear"
              />
            </div>
          </div>
          <div class="information">
            <div class="user">Password:</div>
            <div class="instyle">
              <input
                type="password"
                placeholder="Password"
                v-model="passWordInput"
                ref="word"
                @click="passClear"
              />
            </div>
          </div>
          <div class="button-box">
            <div class="but">
              <button @click="loginJudge">Login</button>
            </div>
          </div>
        </div>
        <div class="tip" v-else>
          <div class="tip-text">欢迎加入到浚宇家族</div>
          <div class="butBox">
            <button class="but" @click="exitLog">退出登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss">
@import "../assets/scss/login.scss";
</style>

<script>
export default {
  data() {
    return {
      userInput: "",
      passWordInput: ""
    };
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin;
    }
  },
  methods: {
    loginJudge() {
      let userReg =
        /^1[3|4|5|6|7|8|9][0-9]{9}$/ || /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      // let userReg2 =;
      let passReg = /^(?=.*?[a-z)(?=.*>[A-Z])(?=.*?[0-9])[a-zA_Z0-9]{6,10}$/;
      // console.log(userReg.test(this.userInput));
      if (userReg.test(this.userInput)) {
        if (!passReg.test(this.passWordInput)) {
          this.$refs.word.style.backgroundColor = "red";
          this.passWordInput = "长度为6－10,包含大小写";
        } else {
          // 验证成功 注入到 LoadStore
          localStorage.setItem("id", this.userInput);
          localStorage.setItem("pass", this.passWordInput);
          this.isLoginState();
          this.$router.push({
            name: "ReMusic"
          });
        }
      } else {
        this.$refs.user.style.backgroundColor = "red";
        this.userInput = "请输入邮箱或者电话号码";
      }
      // alert("请输入邮箱或者电话号码")
    },
    userClear() {
      this.$refs.user.style.backgroundColor = "#d3d0e4";
      this.$refs.word.style.backgroundColor = "#d3d0e4";
      this.userInput = "";
    },
    passClear() {
      this.$refs.user.style.backgroundColor = "#d3d0e4";
      this.$refs.word.style.backgroundColor = "#d3d0e4";
      this.passWordInput = "";
    },
    isLoginState() {
      this.$store.commit("isLoginState");
    },
    noLoginState() {
      this.$store.commit("noLoginState");
    },
    exitLog() {
      this.noLoginState();
      localStorage.removeItem("id");
      localStorage.removeItem("pass");
      this.$router.push({
        name: "ReMusic"
      });
    }
  }
};
</script>